<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>POJO生成器</title>
    <!-- vue.min.js -->
    <script type="text/javascript" src="js/vue.min.js"></script>
    <!-- axios.min.js -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- vue-router.min.js -->
    <!-- <script type="text/javascript" src="js/vue-router.min.js"></script> -->
    <!-- 引入样式 -->
    <link rel="stylesheet" type=" text/css" href="element-ui/element-ui.min.css" />
    <!-- 引入组件库 -->
    <script type="text/javascript" src="element-ui/element-ui.min.js"></script>

    <link rel="stylesheet" type=" text/css" href="css/atom-one-dark.min.css">
    <script type="text/javascript" src="js/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" type=" text/css" href="css/index.css" />
</head>

<body>
    <div id="app">
        <!-- <el-container>
            <el-aside width="60%" height="100%">
                <el-select v-model="value1" multiple placeholder="请选择" style="width: 50%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        <span style="float: left;margin-right: 10px">{{item.value}}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{item.label}}</span>
                    </el-option>
                </el-select>
                <el-button type="primary">搜索</el-button>
                <el-tables ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-tables-column type="selection" width="55">
                    </el-tables-column>
                    <el-tables-column label="日期" width="120">
                        <template slot-scope="scope">{{ scope.row.date }}</template>
                    </el-tables-column>
                    <el-tables-column prop="name" label="姓名" width="120">
                    </el-tables-column>
                    <el-tables-column prop="address" label="地址" show-overflow-tooltip>
                    </el-tables-column>
                </el-tables>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
                    <el-button @click="toggleSelection()">取消选择</el-button>
                </div>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>


            </el-aside>
            <el-main width="40%" height="100%">Main</el-main>
        </el-container> -->

        <div class="tables">
            <el-form :inline="true" :model="query" class="demo-form-inline">
                <el-form-item>
                    <div class="el-input el-input-group el-input-group--append el-input-group--prepend">
                        <div class="el-input-group__prepend">筛选表</div>
                        <el-select v-model="query.tableNames" multiple collapse-tags
                            :placeholder="selectUI.selectPlaceholder" :disabled="selectUI.selectDisabled">
                            <el-option v-for="item in tables" :key="item.tableName" :label="item.tableComment"
                                :value="item.tableName">
                                <span style="float: left;margin-right: 10px">{{item.tableName}}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{item.tableComment}}</span>
                            </el-option>
                        </el-select>
                        <div class="el-input-group__append el-input-group__prepend">关键字</div>
                        <el-input v-model="query.keyword" placeholder="请输入关键字" :disabled="selectUI.selectDisabled">
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="pageQuery()">查询</el-button>
                    <el-button type="primary">新增</el-button>
                </el-form-item>
                <el-form-item style="float: right">
                    <el-button type="primary">DTO生成</el-button>
                    <el-button type="primary">实体类生成</el-button>
                        <el-button type="primary">Controller生成</el-button>
                        <el-button type="primary">Service生成</el-button>
                </el-form-item>
            </el-form>

            <!-- 表格标题 -->
            <el-col :span="14">
                <el-tables :data="Column" border highlight-current-row style="width: 100%;margin-top: 0px" select="">
                    <el-tables-column type="selection" width="35px"></el-tables-column>
                    <el-tables-column prop="tableName" label="表名"></el-tables-column>
                    <el-tables-column prop="columnName" label="字段名"></el-tables-column>
                    <el-tables-column prop="dataType" label="字段类型"></el-tables-column>
                    <el-tables-column prop="characterMaximumLength" label="字段长度"></el-tables-column>
                    <el-tables-column prop="nonNullable" label="非空">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.nonNullable"></el-checkbox>
                        </template>
                    </el-tables-column>
                    <el-tables-column prop="columnComment" label="注释"></el-tables-column>
                    <!-- <el-tables-column prop="address" label="地址"></el-tables-column> -->
                    <!-- <el-tables-column prop="tag" width="100" sortable label="标签"> <template slot-scope="scope"> <el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}} </el-tag> </template> </el-tables-column> -->
                    <!-- 操作按钮 -->
                    <!-- <el-tables-column label="操作" width="80"> <template slot-scope="scope"> <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">生成</el-button> <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">查看</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-tables-column> -->
                </el-tables> <!-- 页码 -->
                <div class="pagination">
                    <el-pagination background @size-change="pageQuery()" @current-change="pageQuery()"
                        :current-page.sync="page.current" :page-sizes="[10, 20, 30, 40]" :page-size.sync="page.size"
                        layout="total, sizes, prev, pager, next, jumper" :total="page.total"> </el-pagination>
                </div>
            </el-col>
            <!-- 预览面板 -->
            <el-col :span="10" class="java hljs language-java flowyscroll">
                <pre v-highlightjs>
                <button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#template-code" @click="copy">复制</button>
                <code class="java" id="template-code" style="font-size: 15px">
        package com.dlts.generator.entity;
        
        import com.baomidou.mybatisplus.extension.activerecord.Model;
        import io.swagger.annotations.ApiModel;
        import io.swagger.annotations.ApiModelProperty;
        import lombok.Getter;
        import lombok.Setter;
        import lombok.experimental.Accessors;
        
        import java.io.Serializable;
        
        /**
        * <p>
        * 
        * </p>
        *
        * @author DLTS
        * @since 2022-01-11
        */
        @Getter
        @Setter
        @Accessors(chain = true)
        @ApiModel(value = "Column对象", description = "")
        public class Column extends Model&lt;Column&gt; {
        
            private static final long serialVersionUID = 1L;
        
            @ApiModelProperty(value = "表目录")
            private String tableCatalog;
        
            @ApiModelProperty(value = "库名")
            private String tableSchema;
        
            @ApiModelProperty(value = "表名")
            private String tableName;
        
            @ApiModelProperty(value = "列名")
            private String columnName;
        
            @ApiModelProperty(value = "顺序位置")
            private Long ordinalPosition;
        
            @ApiModelProperty(value = "列默认值")
            private String columnDefault;
        
            @ApiModelProperty(value = "是否为空(不能为空=NO,可以为空=YES)")
            private String isNullable;
        
            @ApiModelProperty(value = "(列)数据类型(varchar)")
            private String dataType;
        
            @ApiModelProperty(value = "字符最大长度(字符类型才有)")
            private Long characterMaximumLength;
        
            @ApiModelProperty(value = "字符八位字节长度(整数类型才有)")
            private Long characterOctetLength;
        
            @ApiModelProperty(value = "数值精度(浮点数类型才有)")
            private Long numericPrecision;
        
            @ApiModelProperty(value = "小数精度(浮点数类型才有)")
            private Long numericScale;
        
            @ApiModelProperty(value = "日期时间精度")
            private Long datetimePrecision;
        
            @ApiModelProperty(value = "字符集名称")
            private String characterSetName;
        
            @ApiModelProperty(value = "排序规则名称")
            private String collationName;
        
            @ApiModelProperty(value = "列类型(varchar(32))")
            private String columnType;
        
            @ApiModelProperty(value = "列主键(主键=PRI)")
            private String columnKey;
        
            @ApiModelProperty(value = "额外说明")
            private String extra;
        
            @ApiModelProperty(value = "特权")
            private String privileges;
        
            @ApiModelProperty(value = "列注释")
            private String columnComment;
        
        
            @Override
            public Serializable pkVal() {
                return null;
            }
        
        }
                </code>
              </pre>
            </el-col>

        </div>



    </div>



    <script type="text/javascript">
        axios.defaults.timeout = 10000;
        axios.defaults.baseURL = "http://localhost:8080";
        axios.defaults.withCredentials = true;
        Vue.prototype.$http = axios;
        // new Vue({
        //     el: '#app',
        //     data: {
        //         options: [{
        //             value: 'sys_template',
        //             label: '模板管理表'
        //         }, {
        //             value: 'sys_module',
        //             label: '模块管理表'
        //         }, {
        //             value: '选项3',
        //             label: '蚵仔煎'
        //         }, {
        //             value: '选项4',
        //             label: '龙须面'
        //         }, {
        //             value: '选项5',
        //             label: '北京烤鸭'
        //         }],
        //         value1: [],
        //         value2: [],
        //         currentPage1: 5,
        //         currentPage2: 5,
        //         currentPage3: 5,
        //         currentPage4: 4,
        //         tableData: [{
        //             date: '2016-05-03',
        //             name: '王小虎',
        //             address: '上海市普陀区金沙江路 1518 弄'
        //         }, {
        //             date: '2016-05-02',
        //             name: '王小虎',
        //             address: '上海市普陀区金沙江路 1518 弄'
        //         }, {
        //             date: '2016-05-04',
        //             name: '王小虎',
        //             address: '上海市普陀区金沙江路 1518 弄'
        //         }, {
        //             date: '2016-05-01',
        //             name: '王小虎',
        //             address: '上海市普陀区金沙江路 1518 弄'
        //         }, {
        //             date: '2016-05-08',
        //             name: '王小虎',
        //             address: '上海市普陀区金沙江路 1518 弄'
        //         }, {
        //             date: '2016-05-06',
        //             name: '王小虎',
        //             address: '上海市普陀区金沙江路 1518 弄'
        //         }, {
        //             date: '2016-05-07',
        //             name: '王小虎',
        //             address: '上海市普陀区金沙江路 1518 弄'
        //         }],
        //         multipleSelection: []
        //     },
        //     methods: {
        //         toggleSelection(rows) {
        //             if (rows) {
        //                 rows.forEach(row => {
        //                     this.$refs.multipleTable.toggleRowSelection(row);
        //                 });
        //             } else {
        //                 this.$refs.multipleTable.clearSelection();
        //             }
        //         },
        //         handleSelectionChange(val) {
        //             this.multipleSelection = val;
        //         },
        //         handleSizeChange(val) {
        //             console.log(`每页 ${val} 条`);
        //         },
        //         handleCurrentChange(val) {
        //             console.log(`当前页: ${val}`);
        //         }
        //     }
        // });

        new Vue({
            el: "#app",
            data: {
                // 筛选表下拉数据
                tables: [
                    { tableName: 'table12321312312312332434234234324', tableComment: '表' },
                    { tableName: 'table2', tableComment: '表二' },
                ],
                // 表格数据
                Column: [],
                // 待生成表格数据 
                generateColumn: [],
                // 搜索框
                query: { tableNames: [], keyword: '' },
                selectUI: {
                    selectPlaceholder: "默认所有表",
                    selectDisabled: false,
                },
                // 表格
                page: { current: 1, size: 10, total: 0 }
            },
            methods: {
                selector() {
                    axios.get('/tables/selector').then((resp) => {
                        console.log(resp);
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                selectedEvent(selection, row) {
                    this.generateColumn
                },
                pageQuery() {
                    this.$http.post("/Column/pageQuery", {
                        keyword: this.query.keyword,
                        tableNames: this.query.tableNames,
                        current: this.page.current,
                        size: this.page.size
                    }).then((resp) => {
                        console.log(resp);
                        this.Column = resp.data;
                        this.page.total = resp.count;
                        // this.$message({message: '查询成功',type: 'success',offset: 100,showClose: true,duration: 2000});
                    }
                    );
                },
                copy() {
                    // if(!this.init) return;
                    var clipboard = new Clipboard('.copy-btn')
                    clipboard.on('success', e => {
                        this.$message({ message: '复制成功', type: 'success', offset: 100, showClose: true, duration: 2000 });
                        // 释放内存
                        clipboard.destroy();
                    })
                    clipboard.on('error', e => {
                        // 不支持复制
                        //console.log('该浏览器不支持自动复制')
                        // 释放内存
                        clipboard.destroy()
                    })
                }
            },
            created() {
                this.selector();
            }
        });
    </script>
</body>

</html>